<template>
	<view class="box">
		<view v-if="list && list.length != 0 " class="df ac sb" style="flex-wrap:wrap;">
			<view class="add_product_item" v-for="(item,index) in list" :key="index"
				@click="goPage('/subPack/product/product-details',item.id)">
				<view style="padding:15rpx">
					<view class="product_img" v-if="isString(item.url)" ref="product_img"
						style="height:235rpx;">
						<image :src="getImgSrc(item.url)" mode="aspectFill" />
					</view>
					<!-- :style="{ height: img_width == 0 ? (337.7 * 0.75) + 'rpx' : (img_width * 0.75) + 'px' }" -->
					<view class="product_img" v-else ref="product_img" style="height:235rpx;">
						<image :src="getImgSrc(item.url[0])" mode="aspectFill" />
					</view>
					<view class="product_name mt10 f600">
						{{ item.name || ''}}
					</view>
					<view class="product_tag mt5 f13">
						<view class="product_tag_text">{{item.machining || ''}}</view>
						<view class="product_tag_text">{{ item.material || ''}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const http = require('../../utils/http');
export default {
	data(){
		return {
			id:0,
			list:[]
		}
	},
	onLoad(opt){
		this.id = opt.id
		this.getList()
	},
	methods:{
		getList(){
			http.request('user/productList',{uid:this.id}).then(res=>{
				this.list = res.data.list.map(item=>{
					if(typeof item.url == 'string' && item.url[0] != '['){
						item.url = [item.url]
					} else {
						item.url = JSON.parse(item.url)
					}
					return item
				})
				// const nameList = []
				// this.productList.forEach((item, index) => {
				// 	nameList = []
				// 	this.materialList.forEach((v, i) => {
				// 		if (item.material_id.includes(v.id)) {
				// 			nameList.push(v.name)
				// 		}
				// 	})
				// 	this.productList[index].material = nameList.join("、")
				// 	nameList = []
				// 	this.bese_info.machining.forEach((res, i) => {
				// 		res.children.forEach(v => {
				// 			if (item.machining_id.includes(v.id)) {
				// 				nameList.push(v.name)
				// 			}
				// 		})
				// 	})
				// 	this.productList[index].machining = nameList.join("、")
				// })
			})
			// http.request('user/settledInfo', {
			// 	id:this.id
			// }).then(res=>{
			// 	this.list = res.data.info.detail.main_products || []
			// })
		},
		isString(value) {
			return typeof value === 'string';
		},
		goPage(url,id){
			uni.navigateTo({
				url:url + '?id=' + id + '&uid=' + this.id
			})
		}
	}
}
</script>

<style lang="scss">
	.box{
		padding: 30rpx;
		box-sizing: border-box;
		.text_con {
			padding: 15rpx;
			box-sizing: border-box;
		
			.text_con_title {
				font-size: 30rpx;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				color: #000;
				text-overflow: ellipsis;
			}
		
			.text_desc {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.add_product_item {
		margin-bottom: 20rpx;
		width: 48%;
		border: 2rpx solid rgba(0, 0, 0, 0.05);
		box-shadow: 0 0 10rpx 1rpx rgba(0, 0, 0, 0.4);
		// border: 7rpx solid #CDCDCD;
		justify-content: center;
		flex-direction: column;
		border-radius: 10rpx;
		// padding:10rpx;
		// padding: 50rpx 0rpx;
		box-sizing: border-box;
	
		.name {
			color: #CDCDCD;
			// padding-bottom: 50rpx;
		}
	
		.product_img {
			position: relative;
			width: 100%;
			// min-height: 250rpx;
	
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
			.top_up{
				position: absolute;
				right: 8rpx;
				top: 8rpx;
				padding:8rpx 15rpx;
				background-color: #FFD300;
				border-radius: 10rpx;
			}
		}
	
		.product_tag {
			color: #A2A2A2;
			height: 68rpx;
			.product_tag_text {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	
		.product_bom {
			border-top: 1px solid #a2a2a2a3;
			padding: 10rpx;
			justify-content: flex-end;
		}
	}
</style>